<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>主界面</title>
    <!--layui的CSS样式-->
    <link type="text/css" rel="stylesheet" href="../lib/layuimini/lib/layui-v2.5.5/css/layui.css"/>
    <!--layui的js-->
    <script src="../lib/layuimini/lib/layui-v2.5.5/layui.js"></script>
<!--    index的js-->

    <!--给此页面加logo-->
    <link rel="shortcut icon" href="../img/logo.ico">
</head>

<body  style="background-size: cover;overflow: hidden;">

<!--布局组件 layui-layout -->
<div class="layui-layout layui-layout-admin">
    <!--头 layui-header-->
<!--    <div class="layui-header" style="background-color: #FFFFFF;">-->
<!--        <a href="index.html"><div class="layui-logo layui-hide-xs layui-bg-black">FA</div></a>-->
<!--    </div>-->

    <div class="layui-header">
<!--        <img src="../img/gzsj.png" width="20px" height="20px" align="center">-->
        <a href=""><div class="layui-logo layui-hide-xs layui-bg-black">FA管理系统</div></a>
    </div>



<!--    头部业务的分类-->
<!--    有一个问题，如何点击超链接，在左侧导航栏查询出它相对应的子功能板块呢？主要是还得放在左侧-->
    <div class="layui-header" style="margin-left: 15%;height: 50px;width: 600px">
        <ul class="layui-nav" lay-filter="">
            <li class="layui-nav-item layui-this"><a href="javascript:;">业务处理</a></li>
            <li class="layui-nav-item"><a href="javascript:;">库存管理</a></li>
            <li class="layui-nav-item"><a href="javascript:;">报表管理</a></li>
            <li class="layui-nav-item"><a href="javascript:;">系统管理</a></li>
        </ul>
    </div>



    <!-- 个人设置 -->
    <div class="layui-header" style="margin-left: 80%;">
        <ul class="layui-nav">
            <li class="layui-nav-item">
                <a href="" style="color: #FFFFFF;">个人中心<span class="layui-badge-dot"></span></a>
            </li>
            <li class="layui-nav-item">
                <a href=""><img src="../img/yh2.png" width="20px" height="20px" align="center" style="color: #FFFFFF">我</a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;" style="color:#000000">修改信息</a></dd>
<!--                    把账号退掉，清空session 再跳转到登录界面-->
                    <dd><a href="/toLogin" style="color: #000000">退了</a></dd>
                </dl>
            </li>
        </ul>
    </div>

    <!--功能菜单layui-side side 边  -->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <!--<nav></nav> class="layui-nav  菜单 -->
        <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <li class="layui-nav-item layui-nav-itemed"  th:each="parent,state:${menuMap}">
                <a href="javascript:; " th:text="${parent.key}" style="font-weight: bolder"></a>
                <dl class="layui-nav-child">
                    <dd th:each="child,state:${parent.value}" style="text-align: center;"><a th:title="${child.menuUrl}" th:text="${child.menuName}" ></a></dd>
                </dl>
            </li>
        </ul>
        </div>
    </div>

    <!--编辑区 要用到选项卡 layui-body body 主要区域 -->
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">
            <!--选项卡 layui-tab tab 切换     -->
            <div class="layui-tab" id="demo" lay-filter="demo" lay-allowclose="true">
                <!--选项卡 layui-tab-title 标题     -->
                <ul class="layui-tab-title">
                    <li class="layui-this">基金信息</li>
                </ul>
                <!--选项卡layui-tab-content 内容    -->
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <!--基金信息-->
                        <iframe name="iframe1" src='toFound' width="100%" height="800px" frameborder="0"></iframe>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--页脚区 layui-footer -->
    <div class="layui-footer">
        <!-- 底部固定区域  底部写备案什么的-->
    </div>
</div>


<script type="text/javascript">
    //JS
    layui.use(['jquery','element'], function() {
        var $ = layui.jquery;
        var element = layui.element;

        $("a[title]").click(function (){
            //获取功能模块标题
            var url = $(this).attr("title");
            //获取二级菜单对应的页面
            var title = $(this).text();
            //判断tab页是否已经存在
            var exists = $("li[lay-id='"+url+"']").length;

            if(exists == null || exists == ""){
                element.tabAdd('demo', {//'demo'是跟内容的lay-filter的名字一样
                    title: title
                    //,content: '选项卡的内容' //支持传入html
                    ,content:'<iframe src='+url+' width="100%" height="800px" frameborder="0"></iframe>'
                    ,id: url   //等同lay-id
                });
                //<li lay-id='url'></li>
                //选中
                element.tabChange('demo', url);
            }else{
                //选中
                element.tabChange('demo', url);
            }
        });
    });
</script>

<!--头部横着的导航栏js-->
<script>
    //注意：导航 依赖 element 模块，否则无法进行功能性操作
    layui.use('element', function(){
        var element = layui.element;
    });
</script>

</body>
</html>